<div class="clearfix">
  <div class="col-md-6 p-xs">
    <div id="top_left" class="panel panel-default">
      <div class="panel-heading text-center">数据显示</div>
      <div class="panel-body">
        <div class="row">
          <div class="col-xs-6 text-center">
            <%=image_tag"power-cabinet.png",width:"80%", class: "data_img"%>
          </div>
          <div class="col-xs-6">
            <div class="table-responsive cabinet-table">
              <table class="table table-bordered">
                <thead>
                  <tr class="text-center">
                    <td colspan="2">系统</td>
                  </tr>
                </thead>
                <tbody>
                  <% @points["系统"].each do |key, value| %>
                    <% unless exclude_points["系统"] && exclude_points["系统"].include?(key) %>
                      <tr>
                        <td scope="row" align="center" width="60%"><%= key %></td>
                        <td class="unit"  align="center"><%= value %></td>
                      </tr>
                    <% end %>
                  <% end %>
                </tbody>
              </table>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
  <div class="col-md-6 p-xs">
    <div id="top_right" class="panel panel-default">
      <div class="panel-heading text-center">输出负载率</div>
      <div class="panel-body">
        <div id="load1"></div>
      </div>
    </div>
  </div>
</div>
<div class="clearfix">
  <div class="col-md-6 p-xs">
    <div class="panel panel-default">
      <div class="panel-heading text-center">功率</div>
      <div class="panel-body">
        <div id="load2" style="height:270px"></div>
      </div>
    </div>
  </div>
  <div class="col-md-6 p-xs">
    <div class="panel panel-default">
      <div class="panel-heading text-center">电压</div>
      <div class="panel-body">
        <div id="load3" style="height:270px"></div>
      </div>
    </div>
  </div>
</div>

<!--输出负载率 -->
<script type="text/javascript">
    //设置左右两模块等高
    var height = $("#top_left").height();
    $("#top_right").height(height);
    $("#load1").height(height-60);

    //保留一位小数
    var format_number = function(i){
      num = new Number(i)
      return num.toFixed(1)
    }

    // 路径配置
    require.config({
      paths: {
        echarts: '/assets/echarts'
      }
    });

    // 使用
    require(
      [
      'echarts',
        'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
        ],
        function (ec) {
        // 基于准备好的dom，初始化echarts图表
        var myChart = ec.init(document.getElementById('load1'));
        var labelTop = {
          normal : {
            label : {
              show : true,
              position : 'center',
              formatter : '{b}',
              textStyle: {
                baseline : 'top',
                fontSize: 12
              }
            },
            labelLine : {
              show : false
            }
          }
        };
        var labelFromatter = {
          normal : {
            label : {
              formatter : function (params){
                return format_number(100 - params.value) + 'A'
              },
              textStyle: {
                baseline : 'bottom',
                fontSize: 24,
              }
            }
          },
        }
        var labelBottom = {
          normal : {
            color: '#ccc',
            label : {
              show : true,
              position : 'center'
            },
            labelLine : {
              show : false
            }
          },
          emphasis: {
            color: 'rgba(0,0,0,0)'
          }
        };
        var radius = [45, 50];
        var  option = {

          series : [
            <% unless exclude_points["电流"] && exclude_points["电流"].include?("A相电流") %>
              <% if @points["电流"].present? %>
                {
                  type : 'pie',
                  center : ['15%', '50%'],
                  radius : radius,
                  x: '30%', // for funnel
                  itemStyle : labelFromatter,
                  data : [
                    {name:'other', value:<%= 100 - @points["电流"]["A相电流"].to_i %>, itemStyle : labelBottom},
                    {name:'A相电流', value:<%= @points["电流"]["A相电流"].to_i %>,itemStyle : labelTop}
                  ]
                },
              <% end %>
            <% end %>
            <% unless exclude_points["电流"] && exclude_points["电流"].include?("B相电流") %>
              <% if @points["电流"].present? %>
                {
                  type : 'pie',
                  center : ['50%', '50%'],
                  radius : radius,
                  x:'50%', // for funnel
                  itemStyle : labelFromatter,
                  data : [
                    {name:'other', value:<%= 100 - @points["电流"]["B相电流"].to_i %>, itemStyle : labelBottom},
                    {name:'B相电流', value:<%= @points["电流"]["B相电流"].to_i %>,itemStyle : labelTop}
                  ]
                },
              <% end %>
            <% end %>
            <% unless exclude_points["电流"] && exclude_points["电流"].include?("C相电流") %>
              <% if @points["电流"].present? %>
                {
                  type : 'pie',
                  center : ['85%', '50%'],
                  radius : radius,
                  x:'70%', // for funnel
                  itemStyle : labelFromatter,
                  data : [
                    {name:'other', value:<%= 100 - @points["电流"]["C相电流"].to_i %>, itemStyle : labelBottom},
                    {name:'C相电流', value:<%= @points["电流"]["C相电流"].to_i %>,itemStyle : labelTop}
                  ]
                },
              <% end %>
            <% end %>
        ]
      };
        // 为echarts对象加载数据
        myChart.setOption(option);
    }
  );
</script>
<!-- 功率 -->
<script type="text/javascript">
    // 路径配置
    require.config({
      paths: {
        echarts: '/assets/echarts'
      }
    });
    // 使用
    require(
      [
      'echarts',
        'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
        ],
        function (ec) {
        // 基于准备好的dom，初始化echarts图表
        var myChart = ec.init(document.getElementById('load2'));
        var labelTop = {
          normal : {
            label : {
              show : true,
              position : 'center',
              formatter : '{b}',
              textStyle: {
                baseline : 'top',
                fontSize: 12
              }
            },
            labelLine : {
              show : false
            }
          }
        };
        var labelFromatter = {
          normal : {
            label : {
              formatter : function (params){
                return format_number(100 - params.value) + 'Kw'
              },
              textStyle: {
                baseline : 'bottom',
                fontSize: 24
              }
            }
          },
        }
        var labelBottom = {
          normal : {
            color: '#ccc',
            label : {
              show : true,
              position : 'center'
            },
            labelLine : {
              show : false
            }
          },
          emphasis: {
            color: 'rgba(0,0,0,0)'
          }
        };
        var radius = [45, 50];
        var  option = {

          series : [
            <% unless exclude_points["相功率"] && exclude_points["相功率"].include?("A相功率") %>
              <% if @points["相功率"].present? %>
                {
                  type : 'pie',
                  center : ['16.5%', '25%'],
                  radius : radius,
                  x:'30%', // for funnel
                  itemStyle : labelFromatter,
                  data : [
                    {name:'other', value:<%= 100 - @points["相功率"]["A相功率"].to_i %>, itemStyle : labelBottom},
                    {name:'A相功率', value:<%= @points["相功率"]["A相功率"].to_i %>,itemStyle : labelTop}
                  ]
                },
              <% end %>
            <% end %>
            <% unless exclude_points["相功率"] && exclude_points["相功率"].include?("B相功率") %>
              <% if @points["相功率"].present? %>
                {
                  type : 'pie',
                  center : ['50%', '25%'],
                  radius : radius,
                  x:'50%', // for funnel
                  itemStyle : labelFromatter,
                  data : [
                    {name:'other', value:<%= 100 - @points["相功率"]["B相功率"].to_i %>, itemStyle : labelBottom},
                    {name:'B相功率', value:<%= @points["相功率"]["B相功率"].to_i %>,itemStyle : labelTop}
                  ]
                },
              <% end %>
            <% end %>
            <% unless exclude_points["相功率"] && exclude_points["相功率"].include?("C相功率") %>
              <% if @points["相功率"].present? %>
                {
                  type : 'pie',
                  center : ['83.5%', '25%'],
                  radius : radius,
                  x:'70%', // for funnel
                  itemStyle : labelFromatter,
                  data : [
                    {name:'other', value:<%= 100 - @points["相功率"]["C相功率"].to_i %>, itemStyle : labelBottom},
                    {name:'C相功率', value:<%= @points["相功率"]["C相功率"].to_i %>,itemStyle : labelTop}
                  ]
                },
              <% end %>
            <% end %>
            <% unless exclude_points["功率因数"] && exclude_points["功率因数"].include?("A相功率因数") %>
              <% if @points["功率因数"].present? %>
                {
                  type : 'pie',
                  center : ['16.5%', '70%'],
                  radius : radius,
                  x:'30%', // for funnel
                  itemStyle : labelFromatter,
                  data : [
                    {name:'other', value:<%= 100 - @points["功率因数"]["A相功率因数"].to_i %>, itemStyle : labelBottom},
                    {name:'A相功率因数', value:<%= @points["功率因数"]["A相功率因数"].to_i %>,itemStyle : labelTop}
                  ]
                },
              <% end %>
            <% end %>
            <% unless exclude_points["功率因数"] && exclude_points["功率因数"].include?("B相功率因数") %>
              <% if @points["功率因数"].present? %>
                {
                  type : 'pie',
                  center : ['50%', '70%'],
                  radius : radius,
                  x:'50%', // for funnel
                  itemStyle : labelFromatter,
                  data : [
                    {name:'other', value:<%= 100 - @points["功率因数"]["B相功率因数"].to_i %>, itemStyle : labelBottom},
                    {name:'B相功率因数', value:<%= @points["功率因数"]["B相功率因数"].to_i %>,itemStyle : labelTop}
                  ]
                },
              <% end %>
            <% end %>
            <% unless exclude_points["功率因数"] && exclude_points["功率因数"].include?("C相功率因数") %>
              <% if @points["功率因数"].present? %>
                {
                  type : 'pie',
                  center : ['83.5%', '70%'],
                  radius : radius,
                  x:'70%', // for funnel
                  itemStyle : labelFromatter,
                  data : [
                    {name:'other', value:<%= 100 - @points["功率因数"]["C相功率因数"].to_i %>, itemStyle : labelBottom},
                    {name:'C相功率因数', value:<%= @points["功率因数"]["C相功率因数"].to_i %>,itemStyle : labelTop}
                  ]
                },
              <% end %>
            <% end %>
      ]
    };
    // 为echarts对象加载数据
    myChart.setOption(option);
    }
    );
</script>
<!-- 电压 -->
<script type="text/javascript">
    // 路径配置
    require.config({
      paths: {
        echarts: '/assets/echarts'
      }
    });
    // 使用
    require(
      [
      'echarts',
        'echarts/chart/pie' // 使用柱状图就加载bar模块，按需加载
        ],
        function (ec) {
        // 基于准备好的dom，初始化echarts图表
        var myChart = ec.init(document.getElementById('load3'));
        var labelTop = {
          normal : {
            label : {
              show : true,
              position : 'center',
              formatter : '{b}',
              textStyle: {
                baseline : 'top',
                fontSize: 12
              }
            },
            labelLine : {
              show : false
            }
          }
        };
        var labelFromatter = {
          normal : {
            label : {
              formatter : function (params){
                return format_number(100 - params.value) + 'V'
              },
              textStyle: {
                baseline : 'bottom',
                fontSize: 26
              }
            }
          },
        }
        var labelBottom = {
          normal : {
            color: '#ccc',
            label : {
              show : true,
              position : 'center'
            },
            labelLine : {
              show : false
            }
          },
          emphasis: {
            color: 'rgba(0,0,0,0)'
          }
        };
        var radius = [45, 50];
        var  option = {

          series : [
          <% unless exclude_points["相电压"] && exclude_points["相电压"].include?("A相电压") %>
            <% if @points["线电压"].present? %>
              {
                type : 'pie',
                center : ['16.5%', '25%'],
                radius : radius,
                x:'30%', // for funnel
                itemStyle : labelFromatter,
                data : [
                  {name:'other', value:<%= 100 - @points["相电压"]["A相电压"].to_i %>, itemStyle : labelBottom},
                  {name:'A相电压', value:<%= @points["相电压"]["A相电压"].to_i %>,itemStyle : labelTop}
                ]
              },
             <% end %>
          <% end %>
          <% unless exclude_points["相电压"] && exclude_points["相电压"].include?("B相电压") %>
            <% if @points["线电压"].present? %>
              {
                type : 'pie',
                center : ['50%', '25%'],
                radius : radius,
                x:'50%', // for funnel
                itemStyle : labelFromatter,
                data : [
                  {name:'other', value:<%= 100 - @points["相电压"]["B相电压"].to_i %>, itemStyle : labelBottom},
                  {name:'B相电压', value:<%= @points["相电压"]["B相电压"].to_i %>,itemStyle : labelTop}
                ]
              },
            <% end %>
          <% end %>
          <% unless exclude_points["相电压"] && exclude_points["相电压"].include?("C相电压") %>
            <% if @points["线电压"].present? %>
              {
                type : 'pie',
                center : ['83.5%','25%'],
                radius : radius,
                x:'70%', // for funnel
                itemStyle : labelFromatter,
                data : [
                  {name:'other', value:<%= 100 - @points["相电压"]["C相电压"].to_i %>, itemStyle : labelBottom},
                  {name:'C相电压', value:<%= @points["相电压"]["C相电压"].to_i %>,itemStyle : labelTop}
                ]
              },
            <% end %>
          <% end %>
          <% unless exclude_points["线电压"] && exclude_points["线电压"].include?("AB线电压") %>
            <% if @points["线电压"].present? %>
              {
                type : 'pie',
                center : ['16.5%', '70%'],
                radius : radius,
                x:'30%', // for funnel
                itemStyle : labelFromatter,
                data : [
                  {name:'other', value:<%= 100 - @points["线电压"]["AB线电压"].to_i %>, itemStyle : labelBottom},
                  {name:'AB线电压', value:<%= @points["线电压"]["AB线电压"].to_i %>,itemStyle : labelTop}
                ]
              },
            <% end %>
          <% end %>
          <% unless exclude_points["线电压"] && exclude_points["线电压"].include?("BC线电压") %>
            <% if @points["线电压"].present? %>
              {
                type : 'pie',
                center : ['50%', '70%'],
                radius : radius,
                x:'50%', // for funnel
                itemStyle : labelFromatter,
                data : [
                  {name:'other', value:<%= 100 - @points["线电压"]["BC线电压"].to_f %>, itemStyle : labelBottom},
                  {name:'BC线电压', value:<%= @points["线电压"]["BC线电压"].to_f %>,itemStyle : labelTop}
                ]
              },
            <% end %>
          <% end %>
          <% unless exclude_points["线电压"] && exclude_points["线电压"].include?("AC线电压") %>
            <% if @points["线电压"].present? %>
              {
                type : 'pie',
                center : ['83.5%', '70%'],
                radius : radius,
                x:'70%', // for funnel
                itemStyle : labelFromatter,
                data : [
                  {name:'other', value:<%= format("%0.1f",(100 - @points["线电压"]["AC线电压"].to_f)) %>, itemStyle : labelBottom},
                  {name:'AC线电压', value:<%= format("%0.1f", @points["线电压"]["AC线电压"].to_f) %>,itemStyle : labelTop}
                ]
              },
            <% end %>
          <% end %>
          ]
        };
        // 为echarts对象加载数据 
        myChart.setOption(option); 
        }
        );
</script>